<template>
	<view class="qh-goods-image">
		<qh-image :size="size" :src="src" :preview="preview" :shape="shape" :radius="radius" :border="border" :borderColor="borderColor">
			<view class="qh-goods-image__empty-avatar flex-cn-cn" slot="empty" :class="{'border': border}" :style="bgStyle">
				<text class="qh-rt-single qh-goods-image__empty-icon" :class="icon" :style="iconStyle"></text>
			</view>
		</qh-image>
	</view>
</template>

<script>
	export default {
		name: 'qh-goods-image',
		props: {
			src: {
				type: String,
				default: '',
			}, //地址
			size: {
				type: [String, Number],
				default: 96,
			}, //大小
			shape: {
				type: String,
				default: 'square',
			}, //形状 circle圆形  square方形
			radius: {
				type: String,
				default: '',
			}, //圆角（仅对方形有效）  如：8rpx或8  不传单位默认为rpx
			border: {
				type: Boolean,
				default: false,
			}, //是否含有外边框
			borderColor: {
				type: String,
				default: '',
			}, //外边框颜色
			preview: {
				type: Boolean,
				default: false,
			}, //是否支持预览
			bgColor: {
				type: String,
				default: ''
			}, //背景颜色
			color: {
				type: String,
				default: ''
			}, //颜色
			icon: {
				type: String,
				default: 'qh-rt-shangpin'
			},
		},
		computed: {
			bgStyle() {
				return this.bgColor ? ('background-color:' + this.bgColor) : '';
			},
			iconStyle() {
				let size = parseInt(this.size);
				let color = this.color ? (`color:${this.color};`) : '';
				return 'font-size:' + (size * 0.6) + 'rpx;line-height:' + (size * 0.6) + 'rpx;' + color;
			},
		},
	}
</script>

<style lang="scss">
	.qh-goods-image {
		.qh-goods-image__empty-avatar {
			width: 100%;
			height: 100%;
			justify-content: center;
			background-color: #F2F3F5;

			.qh-goods-image__empty-icon {
				font-size: 96rpx;
				color: #cccccc;
			}
		}
	}
</style>
